<template>
  <div class="comp">
    <!-- 放图表 -->
    <div class="echarts" ref="crosswise">子组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartsInstance: null,
      allData: [], //业务数据
    };
  },
  mounted() {
    this.initEcharts();
    this.getData();
    //监听窗口变化实现图表自适应
    window.addEventListener('resize',this.adapTive)
    //调用适配方法
    this.adapTive()
  },
  methods: {
    //1. echarts实例初始化
    initEcharts() {
      this.echartsInstance = this.$echarts.init(this.$refs.crosswise, "dark");
      //设置绘图需要的静态配置项
      let initOptions = {
        // 标题
        title: {
          text: "▍各地区种植面积统计top10",
          top: "2%",
          left: "2%",
        },
        // 提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPoint: {
            type: "shadow",
          },
        },
        // 坐标系
        grid: {
          show: false,
          top: "10%",
          left: "3%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: "value",
        },
        // y轴
        yAxis: {
          type: "category",
        },
        // 图表类型
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "orange", // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: "orangered", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };
      // 绘制基础图表
      this.echartsInstance.setOption(initOptions);
    },
    // 获取业务数据
    async getData() {
      let { data } = await this.$http.get("plantingAreaTop");
      console.log(data);
      this.allData = data;
      //根据业务继续完善图表
      this.setEcharts();
    },
    // 根据业务完善图表
    setEcharts() {
      // 1.组装类目数据和系列数据
      let cateData = this.allData.map((item) => item.name);
      let serData = this.allData.map((item) => item.area);

      //  设置图标绘制项
      let setOptions = {
        yAxis: {
          data: cateData,
        },
        // 图表类型
        series: [
          {
            data: serData,
          },
        ],
      };
      // setOption 合并多次的绘图配置项 完善图表
      this.echartsInstance.setOption(setOptions);
    },
    // 窗口适配方法
    adapTive() {
      let width = this.$refs.crosswise.offsetWidth;

      let scale = (width / 100) * 3.6;

      let adapOptions = {
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
        // 柱子宽度
        series: [
          {
            barWidth: scale,
            itemStyle: {
              borderRadius: [0, scale / 2, scale / 2, 0],
            },
          },
        ],
      };
      // 适配绘图
      this.echartsInstance.setOption(adapOptions);
      // 图标适配
      this.echartsInstance.resize();
    },
  },
};
</script>

<style>
</style>